<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import { ElMessage, ElForm, ElFormItem, ElSwitch, ElInputNumber, ElButton, ElMessageBox, ElTable, ElTableColumn, ElTag, ElSelect, ElOption, ElDialog } from "element-plus";
import { useI18n } from "vue-i18n";
import { getDeviceGroupGroupConfigsApi, setDeviceGroupGroupConfigsApi } from '@/api/configs/deviceGroupConfig';
import { getDeviceOptionsApi } from '@/api/products/device';
import { formatTimestampToDatetime } from "@/utils/appCommon/timeUtil";
import {
  getLocateModelOptions,
  LocateModelCube,
  LocateModelCylinderBody,
  LocateModelCylinderFace,
  LocateModelLine,
  LocateModelPlane, LocateModelSphereFace, LocateModelTankBottom,
  LocateSetConfig,
  ModelConfig,
  SensorSetting
} from "@/utils/appCommon/appCommonOptions/aeLocateConfigModel";

const locateModelOptions = ref(getLocateModelOptions())

// Props定义
const props = defineProps<{
  params: {
    deviceGroupId: number;
    deptId: number;
  };
  forceRefresh: number;
}>();

const { t } = useI18n();
const formRef = ref<InstanceType<typeof ElForm>>();
const configGroupName = "locateSet";
const configKey = "locateSet";

// 定位模型选项已在aeLocateCommon.ts中定义并导入

// 传感器设置表格数据
const sensorSettings = ref<SensorSetting[]>([]);
const loading = ref(false);

// 设备列表选项（用于添加传感器）
const deviceOptions = ref<any[]>([]);

// 所有接口定义已移动到aeLocateCommon.ts并通过import导入

// 表单数据
const formData = reactive<{
  deviceGroupId: number;
  groupName: string;
  config: LocateSetConfig;
  updatedAt: string;
}>({
  deviceGroupId: 0,
  groupName: configGroupName,
  config: {
    enable: false,
    soundSpeed: 5000,
    amplitudeTolerance: 3,
    minSensorCount: 2,
    maxSensorCount: 16,
    eventDefineTime: 1000,
    eventLockTime: 10000,
    eventImpactDistance: 500,
    locateModel: '',
    modelConfig: {
      radius: 1000,
      volume: 4.19,
      sensorRows: 8
    }
  },
  updatedAt: ''
});

// 表单验证规则
const rules = reactive({
  'config.soundSpeed': [
    { required: true, message: '请输入声速', trigger: 'blur' },
    { type: 'number', min: 1000, max: 10000, message: '声速应在1000-10000之间', trigger: 'blur' }
  ],
  'config.amplitudeTolerance': [
    { required: true, message: '请输入幅度容差', trigger: 'blur' },
    { type: 'number', min: 0, max: 20, message: '幅度容差应在0-20之间', trigger: 'blur' }
  ],
  'config.minSensorCount': [
    { required: true, message: '请输入最小传感器数', trigger: 'blur' },
    { type: 'number', min: 1, max: 16, message: '最小传感器数应在1-16之间', trigger: 'blur' }
  ],
  'config.maxSensorCount': [
    { required: true, message: '请输入最大传感器数', trigger: 'blur' },
    { type: 'number', min: 1, max: 16, message: '最大传感器数应在1-16之间', trigger: 'blur' }
  ],
  'config.eventDefineTime': [
    { required: true, message: '请输入事件定义时间', trigger: 'blur' },
    { type: 'number', min: 100, max: 1000000, message: '事件定义时间应在100-1000000之间', trigger: 'blur' }
  ],
  'config.eventLockTime': [
    { required: true, message: '请输入事件闭锁时间', trigger: 'blur' },
    { type: 'number', min: 1000, max: 10000000, message: '事件闭锁时间应在1000-10000000之间', trigger: 'blur' }
  ],
  'config.eventImpactDistance': [
    { required: true, message: '请输入事件撞击间距', trigger: 'blur' },
    { type: 'number', min: 10, max: 10000, message: '事件撞击间距应在10-10000之间', trigger: 'blur' }
  ],
  'config.locateModel': [
    { required: true, message: '请选择定位模型', trigger: 'change' }
  ],
  'config.modelConfig.xRange': [
    { required: ({ config }) => config.locateModel === LocateModelLine || config.locateModel === LocateModelPlane || config.locateModel === LocateModelCube, message: '请输入x轴量程', trigger: 'blur' },
    { type: 'number', min: 1, message: '量程应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.yRange': [
    { required: ({ config }) => config.locateModel === LocateModelPlane || config.locateModel === LocateModelCube, message: '请输入y轴量程', trigger: 'blur' },
    { type: 'number', min: 1, message: '量程应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.zRange': [
    { required: ({ config }) => config.locateModel === LocateModelCube, message: '请输入z轴量程', trigger: 'blur' },
    { type: 'number', min: 1, message: '量程应大于0', trigger: 'blur' }
  ],
  // 平面定位模型验证规则
  'config.modelConfig.rows': [
    { required: ({ config }) => config.locateModel === LocateModelPlane || config.locateModel === LocateModelCylinderFace || config.locateModel === LocateModelCylinderBody, message: '请输入行数', trigger: 'blur' },
    { type: 'number', min: 1, message: '行数应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.columns': [
    { required: ({ config }) => config.locateModel === LocateModelPlane, message: '请输入列数', trigger: 'blur' },
    { type: 'number', min: 1, message: '列数应大于0', trigger: 'blur' }
  ],
  // 罐底定位模型验证规则
  'config.modelConfig.xyRange': [
    { required: ({ config }) => config.locateModel === LocateModelTankBottom, message: '请输入xy量程', trigger: 'blur' },
    { type: 'number', min: 1, message: '量程应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.tankBottomDiameter': [
    { required: ({ config }) => config.locateModel === LocateModelTankBottom, message: '请输入罐底直径', trigger: 'blur' },
    { type: 'number', min: 1, message: '直径应大于0', trigger: 'blur' }
  ],
  // 柱面定位模型验证规则
  'config.modelConfig.cylinderDiameter': [
    { required: ({ config }) => config.locateModel === LocateModelCylinderFace, message: '请输入柱体直径', trigger: 'blur' },
    { type: 'number', min: 1, message: '直径应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.sensorsPerRow': [
    { required: ({ config }) => config.locateModel === LocateModelCylinderFace || config.locateModel === 'cylinder3d', message: '请输入每行数量', trigger: 'blur' },
    { type: 'number', min: 1, message: '每行数量应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.headType': [
    { required: ({ config }) => config.locateModel === LocateModelCylinderFace, message: '请选择封头类型', trigger: 'change' }
  ],
  'config.modelConfig.headHeight': [
    { required: ({ config }) => config.locateModel === LocateModelCylinderFace && config.modelConfig.headType !== 'none', message: '请输入封头高度', trigger: 'blur' },
    { type: 'number', min: 1, message: '封头高度应大于0', trigger: 'blur' }
  ],
  // 柱体定位模型验证规则
  'config.modelConfig.diameter': [
    { required: ({ config }) => config.locateModel === LocateModelCylinderBody, message: '请输入直径', trigger: 'blur' },
    { type: 'number', min: 1, message: '直径应大于0', trigger: 'blur' }
  ],
  // 球面定位模型验证规则
  'config.modelConfig.radius': [
    { required: ({ config }) => config.locateModel === LocateModelSphereFace, message: '请输入半径', trigger: 'blur' },
    { type: 'number', min: 1, message: '半径应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.volume': [
    { required: ({ config }) => config.locateModel === LocateModelSphereFace, message: '请输入体积', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '体积应大于0', trigger: 'blur' }
  ],
  'config.modelConfig.sensorRows': [
    { required: ({ config }) => config.locateModel ===LocateModelSphereFace, message: '请输入传感器行数', trigger: 'blur' },
    { type: 'number', min: 1, message: '传感器行数应大于0', trigger: 'blur' }
  ]
});

// 获取设备列表
const fetchDeviceOptions = async () => {
  try {
    const res = await getDeviceOptionsApi({
      deviceGroupId: formData.deviceGroupId,
      deptId: props.params.deptId
    });
    if (res.code === 0) {
      deviceOptions.value = res.data.options || [];
    }
  } catch (error) {
    ElMessage.error('获取设备列表失败');
  }
};

// 初始化传感器设置表格
const initSensorSettings = async () => {
  await fetchDeviceOptions();
  // 如果传感器设置为空且有设备列表，则初始化表格
  if (sensorSettings.value.length === 0 && deviceOptions.value.length > 0) {
    sensorSettings.value = deviceOptions.value.map(device => ({
      deviceNo: device.val,
      x: 0,
      y: 0,
      z: 0,
      arcLength: 0,
      longitude: 0,
      latitude: 0,
      enabled: false,
      isGuard: false
    }));
  }
};

// 加载配置数据
const loadConfigData = async () => {
  if (!formData.deviceGroupId) return;

  loading.value = true;
  try {
    const res = await getDeviceGroupGroupConfigsApi({
      deviceGroupId: formData.deviceGroupId,
      groupName: formData.groupName
    });

    if (res.code === 0 && res.data?.configs) {
      formData.updatedAt = res.data.updatedAt || '';
      try {
        const configData = JSON.parse(res.data.configs[0]?.configValue || '{}');
        // 更新配置数据
        Object.assign(formData.config, configData.config || {});

        console.log(configData)

        formData.updatedAt = res.data.configs[0]?.updatedAt || '';

        // 更新传感器设置
        if (configData.sensorSettings && configData.sensorSettings.length > 0) {
          sensorSettings.value = configData.sensorSettings;
        } else {
          // 如果没有传感器设置，初始化
          await initSensorSettings();
        }
      } catch (e) {
        console.error('解析配置数据失败', e);
        // 解析失败时初始化传感器设置
        await initSensorSettings();
      }
    } else {
      // 没有配置数据时初始化传感器设置
      await initSensorSettings();
    }
  } catch (error) {
    console.error('加载配置失败', error);
    ElMessage.error('加载配置失败');
    // 加载失败时初始化传感器设置
    await initSensorSettings();
  } finally {
    loading.value = false;
  }
};

// 添加传感器
const addSensor = () => {
  const availableDevices = deviceOptions.value.filter(device =>
    !sensorSettings.value.some(sensor => sensor.deviceId === device.val)
  );

  if (availableDevices.length === 0) {
    ElMessage.warning('没有更多可添加的设备');
    return;
  }

  sensorSettings.value.push({
    deviceId: availableDevices[0].val,
    deviceNo: availableDevices[0].label,
    x: 0,
    y: 0,
    z: 0,
    arcLength: 0,
    longitude: 0,
    latitude: 0,
    enabled: true,
    isGuard: false
  });
};

// 删除传感器
const removeSensor = (index: number) => {
  sensorSettings.value.splice(index, 1);
};

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return;

  try {
    // 表单验证
    await formRef.value.validate();

    // 准备提交数据
    const submitData = {
      deviceGroupId: formData.deviceGroupId,
      groupName: formData.groupName,
      configs: [{
        configKey: configKey,
        configValue: JSON.stringify({
          config: formData.config,
          sensorSettings: sensorSettings.value
        }),
        configDesc: '设备分组定位设置配置'
      }]
    };

    // 二次确认
    await ElMessageBox.confirm(
      '确定要保存当前定位设置配置吗？',
      '确认提交',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );

    // 提交数据
    const res = await setDeviceGroupGroupConfigsApi(submitData);
    if (res.code === 0) {
      ElMessage.success('保存成功');
    } else {
      ElMessage.error('保存失败：' + (res.msg || '未知错误'));
    }
  } catch (error: any) {
    if (error.name !== 'ElMessageBoxCancel') {
      ElMessage.error('表单验证失败或保存失败');
    }
  }
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
    // 重新加载配置数据
    loadConfigData();
  }
};

// 根据定位模型类型获取默认模型配置
const getDefaultModelConfig = (modelType: string): ModelConfig => {
  switch (modelType) {
    case LocateModelLine:
      return {
        sensorCount: 2,
        xRange: 1000,
      };
    case LocateModelPlane:
      return {
        xRange: 1000,
        yRange: 1000,
        rows: 2,
        columns: 2
      };
    case LocateModelCube:
      return {
        xRange: 1000,
        yRange: 1000,
        zRange: 1000,
        sensorCount: 8
      };
    case LocateModelTankBottom:
      return {
        xyRange: 1000,
        tankBottomDiameter: 5000,
        sensorCount: 4
      };
    case LocateModelCylinderFace:
      return {
        cylinderDiameter: 2000,
        cylinderLength: 5000,
        rows: 5,
        sensorsPerRow: 8,
        headType: 'none',
        headHeight: 0
      };
    case LocateModelCylinderBody:
      return {
        diameter: 2000,
        cylinderLength: 5000,
        rows: 5,
        sensorsPerRow: 8
      };
    case LocateModelSphereFace:
    default:
      return {
        radius: 1000,
        volume: 4.19,
        sensorRows: 8
      };
  }
};

// 监听定位模型变化，更新模型配置
watch(() => formData.config.locateModel, (newModel, oldModel) => {
  if (newModel !== oldModel) {
    // 切换模型时，重置为默认配置
    formData.config.modelConfig = getDefaultModelConfig(newModel);
  }
});

// 监听参数变化
watch(() => props.params.deviceGroupId, (newVal) => {
  if (newVal) {
    formData.deviceGroupId = newVal;
    loadConfigData();
  }
}, { immediate: true });

// 监听forceRefresh变化
watch(() => props.forceRefresh, () => {
  loadConfigData();
});

// 组件挂载时加载数据
onMounted(() => {
  if (props.params.deviceGroupId) {
    formData.deviceGroupId = props.params.deviceGroupId;
    loadConfigData();
  }
});
</script>

<template>
  <el-card shadow="never" class="locate-set-container">
    <template #header>
      <div class="card-header">
        <h3>定位设置</h3>
      </div>
    </template>

    <el-form ref="formRef" :model="formData" :rules="rules"  class="form-container">
      <!-- 基础配置 -->
      <el-form-item label="是否启用定位设置" prop="config.enable">
        <el-switch v-model="formData.config.enable" />
      </el-form-item>

      <el-form-item label="声速(m/s)" prop="config.soundSpeed">
        <el-input-number
          v-model.number="formData.config.soundSpeed"
          :min="1000"
          :max="10000"
          :step="100"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="幅度容差(dB)" prop="config.amplitudeTolerance">
        <el-input-number
          v-model.number="formData.config.amplitudeTolerance"
          :min="0"
          :max="20"
          :step="0.5"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="最小传感器数" prop="config.minSensorCount">
        <el-input-number
          v-model.number="formData.config.minSensorCount"
          :min="1"
          :max="16"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="最大传感器数" prop="config.maxSensorCount">
        <el-input-number
          v-model.number="formData.config.maxSensorCount"
          :min="1"
          :max="16"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="事件定义时间HDT(us)" prop="config.eventDefineTime">
        <el-input-number
          v-model.number="formData.config.eventDefineTime"
          :min="100"
          :max="1000000"
          :step="100"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="事件闭锁时间HLT(us)" prop="config.eventLockTime">
        <el-input-number
          v-model.number="formData.config.eventLockTime"
          :min="1000"
          :max="10000000"
          :step="1000"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="事件撞击间距EHS(us)" prop="config.eventImpactDistance">
        <el-input-number
          v-model.number="formData.config.eventImpactDistance"
          :min="10"
          :max="10000"
          :step="10"
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="定位模型" prop="config.locateModel">
        <el-select v-model="formData.config.locateModel" style="width: 200px">
          <el-option
            v-for="option in locateModelOptions"
            :key="option.val"
            :label="option.label"
            :value="option.val"
          />
        </el-select>
      </el-form-item>

      <!-- 模型配置 -->
      <div class="model-config-section">
        <h4>模型配置</h4>

        <!-- 线定位模型配置 -->
        <template v-if="formData.config.locateModel === LocateModelLine">
          <el-form-item label="传感器数量" prop="config.modelConfig.sensorCount">
            <el-input-number
              v-model.number="formData.config.modelConfig.sensorCount"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="x轴量程(mm)" prop="config.modelConfig.xRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.xRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
        </template>

        <!-- 平面定位模型配置 -->
        <template v-else-if="formData.config.locateModel === LocateModelPlane">
          <el-form-item label="x轴量程(mm)" prop="config.modelConfig.xRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.xRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="y轴量程(mm)" prop="config.modelConfig.yRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.yRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="行数" prop="config.modelConfig.rows">
            <el-input-number
              v-model.number="formData.config.modelConfig.rows"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="列数" prop="config.modelConfig.columns">
            <el-input-number
              v-model.number="formData.config.modelConfig.columns"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
        </template>

        <!-- 立方体定位模型配置 -->
        <template v-else-if="formData.config.locateModel === LocateModelCube">
          <el-form-item label="x轴量程(mm)" prop="config.modelConfig.xRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.xRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="y轴量程(mm)" prop="config.modelConfig.yRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.yRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="z轴量程(mm)" prop="config.modelConfig.zRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.zRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="传感器数量" prop="config.modelConfig.sensorCount">
            <el-input-number
              v-model.number="formData.config.modelConfig.sensorCount"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
        </template>

        <!-- 罐底定位模型配置 -->
        <template v-else-if="formData.config.locateModel === LocateModelTankBottom">
          <el-form-item label="xy量程(mm)" prop="config.modelConfig.xyRange">
            <el-input-number
              v-model.number="formData.config.modelConfig.xyRange"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="罐底直径(mm)" prop="config.modelConfig.tankBottomDiameter">
            <el-input-number
              v-model.number="formData.config.modelConfig.tankBottomDiameter"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="传感器数量" prop="config.modelConfig.sensorCount">
            <el-input-number
              v-model.number="formData.config.modelConfig.sensorCount"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
        </template>

        <!-- 柱面定位模型配置 -->
        <template v-else-if="formData.config.locateModel === LocateModelCylinderFace">
          <el-form-item label="柱体直径(mm)" prop="config.modelConfig.cylinderDiameter">
            <el-input-number
              v-model.number="formData.config.modelConfig.cylinderDiameter"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="柱体长度(mm)" prop="config.modelConfig.cylinderLength">
            <el-input-number
              v-model.number="formData.config.modelConfig.cylinderLength"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="行数" prop="config.modelConfig.rows">
            <el-input-number
              v-model.number="formData.config.modelConfig.rows"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="每行数量" prop="config.modelConfig.sensorsPerRow">
            <el-input-number
              v-model.number="formData.config.modelConfig.sensorsPerRow"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="封头" prop="config.modelConfig.headType">
            <el-select v-model="formData.config.modelConfig.headType" style="width: 200px">
              <el-option label="无封头" value="none" />
              <el-option label="上封头" value="top" />
              <el-option label="下封头" value="bottom" />
              <el-option label="两端封头" value="both" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formData.config.modelConfig.headType !== 'none'"
            label="封头高度(mm)"
            prop="config.modelConfig.headHeight"
          >
            <el-input-number
              v-model.number="formData.config.modelConfig.headHeight"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
        </template>

        <!-- 柱体定位模型配置 -->
        <template v-else-if="formData.config.locateModel ===LocateModelCylinderBody">
          <el-form-item label="直径(mm)" prop="config.modelConfig.diameter">
            <el-input-number
              v-model.number="formData.config.modelConfig.diameter"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="柱体长度(mm)" prop="config.modelConfig.cylinderLength">
            <el-input-number
              v-model.number="formData.config.modelConfig.cylinderLength"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="行数" prop="config.modelConfig.rows">
            <el-input-number
              v-model.number="formData.config.modelConfig.rows"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="每行数量" prop="config.modelConfig.sensorsPerRow">
            <el-input-number
              v-model.number="formData.config.modelConfig.sensorsPerRow"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
        </template>

        <!-- 球面定位模型配置 -->
        <template v-else-if="formData.config.locateModel === LocateModelSphereFace">
          <el-form-item label="半径(mm)" prop="config.modelConfig.radius">
            <el-input-number
              v-model.number="formData.config.modelConfig.radius"
              :min="1"
              :step="10"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="体积(m3)" prop="config.modelConfig.volume">
            <el-input-number
              v-model.number="formData.config.modelConfig.volume"
              :min="0.01"
              :step="0.01"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="传感器行数" prop="config.modelConfig.sensorRows">
            <el-input-number
              v-model.number="formData.config.modelConfig.sensorRows"
              :min="1"
              :step="1"
              style="width: 200px"
            />
          </el-form-item>
        </template>
      </div>

      <!-- 传感器设置表格 -->
      <el-form-item label="传感器设置" class="sensor-table-item">
        <div class="sensor-table-header">
          <span>传感器参数配置</span>
          <el-button type="primary" size="small" @click="addSensor">添加传感器</el-button>
        </div>

        <el-table v-loading="loading" :data="sensorSettings" style="width: 100%" border>
          <el-table-column prop="deviceNo" label="设备编号" width="160" />

          <!-- 线定位：只显示设备编号，x -->
          <template v-if="formData.config.locateModel === LocateModelLine">
            <el-table-column prop="x" label="x(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.x"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
          </template>

          <!-- 平面定位：显示设备编号，x，y -->
          <template v-else-if="formData.config.locateModel === LocateModelPlane || formData.config.locateModel === LocateModelCylinderFace">
            <el-table-column prop="x" label="x(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.x"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column prop="y" label="y(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.y"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
          </template>

          <!-- 立方体定位：显示设备编号，x，y，z -->
          <template v-else-if="formData.config.locateModel === LocateModelCube">
            <el-table-column prop="x" label="x(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.x"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column prop="y" label="y(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.y"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column prop="z" label="z(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.z"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
          </template>

          <!-- 罐底定位：显示设备编号，弧度 -->
          <template v-else-if="formData.config.locateModel === LocateModelTankBottom">
            <el-table-column prop="arcLength" label="弧度" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.arcLength"
                  :step="0.001"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
          </template>

          <!-- 柱体定位：显示设备编号，弧度，z -->
          <template v-else-if="formData.config.locateModel === LocateModelCylinderBody">
            <el-table-column prop="arcLength" label="弧度" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.arcLength"
                  :step="0.001"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column prop="z" label="z(mm)" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.z"
                  :step="1"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
          </template>

          <!-- 球面定位：显示设备编号，经度，纬度 -->
          <template v-else-if="formData.config.locateModel === LocateModelSphereFace">
            <el-table-column prop="longitude" label="经度" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.longitude"
                  :step="0.000001"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column prop="latitude" label="纬度" width="200">
              <template #default="scope">
                <el-input-number
                  v-model.number="scope.row.latitude"
                  :step="0.000001"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
          </template>

          <el-table-column prop="enabled" label="是否启用" width="100">
            <template #default="scope">
              <el-switch v-model="scope.row.enabled" />
            </template>
          </el-table-column>

          <el-table-column prop="isGuard" label="是否是护卫传感器" width="100">
            <template #default="scope">
              <el-switch v-model="scope.row.isGuard" />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80" fixed="right">
            <template #default="scope">
              <el-button type="danger" size="small" @click="removeSensor(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="更新时间">
        <span  class="update-time">
          {{ formatTimestampToDatetime(formData.updatedAt) }}
        </span>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item class="form-actions">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">
.locate-set-container {
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.update-time {
  color: #606266;
  font-size: 14px;
}

.form-container {
  padding: 20px 0;
}

.model-config-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.model-config-section h4 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.sensor-table-item {
  margin-top: 30px;
}

.sensor-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 16px;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

:deep(.el-table) {
  margin-top: 10px;
}

:deep(.el-input-number) {
  width: 100%;
}
</style>
